<template>
	<div class="set-initial-filters">
		<div class="initial-filters-top">
			<div class="initial-filters classification">
				<span class="sepia-filter">
					{{ $t('informationPortal.category', '分类') }}
				</span>
				<a-select
					:placeholder="$t('informationPortal.select', '请选择')"
					v-model:value="DataFrom.ClassificationValueData"
					style="width: 100%"
				>
					<a-select-option
						v-for="(item, index) in ProgressClass"
						:key="index"
						:value="routerType == 'regulations' ? item.rc_id : item.nc_id"
						>{{ item.category_name }}</a-select-option
					>
				</a-select>
			</div>
			<div class="initial-filters title">
				<span class="sepia-filter">
					{{ $t('informationPortal.title', '标题') }}
				</span>
				<input-search
					:key="resetKey"
					@search="handleSearch"
					v-model:value="DataFrom.InitTitleValueData"
					:searchPlaceholder="
						$t('informationPortal.titlePlaceholder', '请输入标题名称')
					"
				></input-search>
				<!-- <a-input-search v-model:value="DataFrom.InitTitleValueData" :placeholder="$t('informationPortal.titlePlaceholder', '请输入标题名称')"  style="" @search="onSearch" /> -->
			</div>
			<div class="initial-filters release-time">
				<span class="sepia-filter">
					{{ $t('informationPortal.announced', '发布时间') }}
				</span>
				<a-range-picker
					:locale="locale"
					v-model:value="DataFrom.DefinitiontimeValueData"
					:placeholder="[
						$t('informationPortal.StartTime', '起始时间'),
						$t('informationPortal.announcedEndPlaceholder', '结束时间'),
					]"
				>
					<template #suffixIcon>
						<i class="low-code iconrili1" />
					</template>
				</a-range-picker>
			</div>
			<div class="initial-filters founder">
				<span class="sepia-filter">
					{{ $t('informationPortal.creator', '创建人') }}
				</span>
				<ok-employee-select
					.value="DataFrom.FounderCoordinatorValueData"
					.placeholder="
						$t('informationPortal.creatorPlaceholder', '请输入创建人姓名')
					"
					.update="ctShowAdvancedSearch"
					ref="userSelectAll"
					style="display: block; width: '100%'"
					class="employee-select"
				></ok-employee-select>
			</div>
		</div>
		<div class="initial-filters-bottom">
			<a-button @click="onResults">
				{{ $t('informationPortal.search', '查询') }}
			</a-button>
			<a-button id="reset-a-btn" @click="onReset">
				{{ $t('informationPortal.reset', '重置') }}
			</a-button>
		</div>
	</div>
</template>
<script lang="ts">
import InputSearch from '@/entry_desktop/components/InputSearch/index.vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
import { defineComponent, ref, onMounted } from 'vue'
import { apiInit } from '@/services'

export default defineComponent({
	props: {
		routerType: String,
	},
	components: {
		InputSearch,
	},
	setup(props, ctx) {
		const api = apiInit()
		const type = props.routerType //页面类型
		const ProgressClass = ref()

		let DataFrom: any = ref({
			ClassificationValueData: <string>(<unknown>[]),
			InitTitleValueData: '',
			DefinitiontimeValueData: [],
			FounderCoordinatorValueData: '',
		})

		const resetKey = ref()
		// 重置
		const onReset = () => {
			DataFrom.value = {
				ClassificationValueData: undefined,
				InitTitleValueData: '',
				DefinitiontimeValueData: [],
				FounderCoordinatorValueData: '',
			}
			resetKey.value = Math.random()
			ctx.emit('GetAutoCorrectionWord', DataFrom.value)
		}

		// 查询
		const onResults = () => {
			if(DataFrom.value.DefinitiontimeValueData && DataFrom.value.DefinitiontimeValueData.length > 0){
				DataFrom.value.DefinitiontimeValueData[0].$d.setHours(0)
				DataFrom.value.DefinitiontimeValueData[0].$d.setMinutes(0)
				DataFrom.value.DefinitiontimeValueData[0].$d.setSeconds(0)
				DataFrom.value.DefinitiontimeValueData[1].$d.setHours(23)
				DataFrom.value.DefinitiontimeValueData[1].$d.setMinutes(59)
				DataFrom.value.DefinitiontimeValueData[1].$d.setSeconds(59)
			}
			ctx.emit('GetAutoCorrectionWord', DataFrom.value, 'resetPageInfo')
		}

		// 获得分类数据
		const dataDismiss = () => {
			if (type === 'news') {
				fetchNewsClass()
			} else if (type === 'notifications') {
				fetchNotificationsClass()
			} else if (type === 'regulations') {
				fetchRegulationsClass()
			}
		}

		// 新闻分类
		const fetchNewsClass = async () => {
			const { data, code } = await api.default.ListCategoryNewsPrivateV2POST({})
			if (code === '000000') {
				ProgressClass.value = data
			}
		}
		// 公告详情分类
		const fetchNotificationsClass = async () => {
			const { data, code } = await api.default.ListCategoryNoticePrivateV2POST(
				{}
			)
			if (code === '000000') {
				ProgressClass.value = data
			}
		}
		// 规章制度详情分类
		const fetchRegulationsClass = async () => {
			const { data, code } = await api.default.ListCategoryRulesPrivateV2POST(
				{}
			)
			if (code === '000000') {
				ProgressClass.value = data
			}
		}
		//获得搜索框数据
		const ctShowAdvancedSearch = (ids: any, value: any) => {
			DataFrom.value.FounderCoordinatorValueData = ids[0]
		}
		// 搜索
		const handleSearch = (value: string) => {
			DataFrom.value.InitTitleValueData = value
		}

		onMounted(async () => {
			dataDismiss()
		})

		return {
			onReset,
			onResults,
			DataFrom,
			ProgressClass,
			locale,
			ctShowAdvancedSearch,
			handleSearch,
			resetKey,
		}
	},
})
</script>
<style lang="less">
.set-initial-filters {
	width: 100%;
	height: 138px;
	background: @rok-white-bg;
	border-radius: 8px;
	padding: 13px 20px 16px 20px;
	margin-top: 17px;
	margin-bottom: 16px;
	box-sizing: border-box;

	.initial-filters-top {
		width: 100%;
		display: flex;
		flex-grow: row;
		justify-content: space-between;
		align-items: center;

		.initial-filters {
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			width: ceil(25%);
			height: 61px;
			margin-right: 16px;
			font-size: 14px;
			font-weight: 500;
			color: @rok-text-color;
			.ant-input-affix-wrapper {
				width: 100% !important;
				padding: 3px 11px;
			}
			.sepia-filter {
				font-weight: 600;
				font-size: 14px;
			}
			.ant-calendar-picker-input
				.ant-calendar-range-picker-input:nth-of-type(1) {
				width: 41%;
				height: 99%;
				text-align: left;
				background-color: transparent;
				border: 0;
				outline: 0;
			}
			.ant-calendar-picker-input
				.ant-calendar-range-picker-input:nth-of-type(2) {
				width: 45%;
				height: 99%;
				text-align: right;
				background-color: transparent;
				border: 0;
				outline: 0;
			}
		}

		.founder {
			margin-right: 0;
		}
	}
	.initial-filters-bottom {
		.ant-btn:first-child {
			background-color: @rok-primary-color;
			border-color: @rok-primary-color;
			color: #fff;
			&:hover {
				background-color: @rok-primary-hover-color;
			}
		}
		// button:active {
		// 	background-color: @rok-primary-color;
		// }
		// button:focus {
		// 	// background-color: @rok-primary-color;
		// 	// border-color: #bbbfc4;
		// 	// color: black;
		// }

		// button:hover {
		// 	background-color: @rok-primary-color;
		// }
		margin-top: 16px;
		display: flex;
		justify-content: flex-end;
		.ant-btn {
			margin-left: 12px;
		}
	}
}
#reset-a-btn {
	background-color: #fff;
	&:focus {
		border-color: #bbbfc4;
		color: black;
	}
	&:hover {
		border-color: @rok-primary-color;
		color: @rok-primary-color;
	}
	&:active {
		border-color: rgb(139, 139, 139);
		color: @rok-primary-color;
	}
}
</style>
